<template>
<q-page padding>
  <div >
    <q-btn label="确认" class="tw-m-2" color="primary" @click="search()"/>
    <div>
      <q-markup-table class="tw-w-full" style="height: 33vh;">
        <tbody>
        <tr class="text-left">
          <td class="text-left">城市名称</td>
          <td class="text-left">
            <q-input v-model="city"/>
          </td>
        </tr>
        <tr class="text-left">
          <td class="text-left">地表供水</td>
          <td class="text-left">
            <q-input v-model="w1"/>
          </td>
        </tr>

        <tr class="text-left">
          <td class="text-left">地下供水</td>
          <td class="text-left">
            <q-input v-model="w2"/>
          </td>
        </tr>

        <tr class="text-left">
          <td class="text-left">其他供水</td>
          <td class="text-left">
            <q-input v-model="w3"/>
          </td>
        </tr>

        <tr class="text-left">
          <td class="text-left">农业用水</td>
          <td class="text-left">
            <q-input v-model="w4"/>
          </td>
        </tr>
        <tr class="text-left">
          <td class="text-left">工业用水</td>
          <td class="text-left">
            <q-input v-model="w5"/>
          </td>
        </tr>
        <tr class="text-left">
          <td class="text-left">生活用水</td>
          <td class="text-left">
            <q-input v-model="w6"/>
          </td>
        </tr>
        <tr class="text-left">
          <td class="text-left">生态用水</td>
          <td class="text-left">
            <q-input v-model="w7"/>
          </td>
        </tr>
        <tr class="text-left">
          <td class="text-left">干旱等级</td>
          <td class="text-left">
            <q-select v-model="rank" :options="rank_options"/>
          </td>
        </tr>
        <tr class="text-left">
          <td class="text-left">决策侧重</td>
          <td class="text-left">
            <q-select v-model="choice" :options="decision"/>
          </td>
        </tr>
        </tbody>
      </q-markup-table>
    </div>
    <q-separator  vertical class="tw-m-4"/>
    <div v-if="vis">
      <q-markup-table flat bordered>
        <thead >
        <tr>
          <th colspan="5">
            <div class="row no-wrap items-center">
              <div class="text-h6 q-ml-md text-black">
                2019 年{{city}}侧重社会效益情况下水资源配置结果如下（单位：亿 m³）：
              </div>
            </div>
          </th>
        </tr>
        </thead>
        <tbody >
        <tr>
          <td class="text-left"></td>
          <td class="text-right">农业</td>
          <td class="text-right">工业</td>
          <td class="text-right">生活</td>
          <td class="text-right">生态</td>
        </tr>
        <tr>
          <td class="text-left">预期用水</td>
          <td class="text-right">{{barData.agriculture.expect}}</td>
          <td class="text-right">{{barData.industry.expect}}</td>
          <td class="text-right">{{barData.life.expect}}</td>
          <td class="text-right">{{barData.ecology.expect}}</td>
        </tr>
        <tr>
          <td class="text-left">实际供水</td>
          <td class="text-right">{{barData.agriculture.actual}}</td>
          <td class="text-right">{{barData.industry.actual}}</td>
          <td class="text-right">{{barData.life.actual}}</td>
          <td class="text-right">{{barData.ecology.actual}}</td>
        </tr>
        <tr class="tw-w-full">
          <td colspan="4">
            <div ref="bar" id="bar_chart" style="height: 300px;">

            </div>
          </td>
        </tr>
        </tbody>
      </q-markup-table>
    </div>
  </div>
</q-page>
</template>

<script setup>
import {ref, watch} from "vue";
import * as echarts from 'echarts';
import { api } from "src/boot/api";


let city = ref("普洱市")
let w1 =ref(11.45)
let w2 = ref(0.033)
let w3 = ref(0.1411)

let w4 = ref(9.634)
let w5 = ref(0.6650)
let w6  =ref(1.2462)
let w7 = ref(0.0833)

let rank = ref("中旱")
let rank_options = ref(["轻旱","中旱","重旱"])

let choice = ref("社会效益")
let decision = ref(["经济效益", "生态效益", "社会效益"])
let bar = ref()

let barData = ref({
  agriculture: {
    expect: 11.45,
    actual: 9.634
  },
  industry: {
    expect: 0.033,
    actual: 0.665
  },
  life: {
    expect: 0.1411,
    actual: 1.2462
  },
  ecology: {
    expect: 0.0833,
    actual: 0.065
  }
})
function render() {

let data = barData.value 
// convert data to array
let expect = []
let actual = []
let categories = []
for (let key in data) {
  console.log(key)
  expect.push(data[key].expect)
  actual.push(data[key].actual)
  categories.push(key)
}
console.log(expect, actual, categories)

let chartDom = document.getElementById('bar_chart');
let myChart = echarts.init(chartDom);
let option;

option = {
  title: {
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: categories
  },
  series: [
    {
      name: '预期需水',
      type: 'bar',
      data: expect
    },
    {
      name: '配置后',
      type: 'bar',
      data: actual
    }
  ]
};

option && myChart.setOption(option);


}

watch(bar,(old,newVal)=>{
  if(old){
    render()
  }
  if(newVal){
    console.log(newVal)
    render()
  }
})
let vis = ref(false)
let confirm = ()=>{
  setTimeout(()=>{
    vis.value = true
  },2000)
}

let search = ()=>{
  let formData = new FormData()
  formData.append("city",city.value)
  formData.append("w1",w1.value)
  formData.append("w2",w2.value)
  formData.append("w3",w3.value)
  formData.append("w4",w4.value)
  formData.append("w5",w5.value)
  formData.append("w6",w6.value)
  formData.append("w7",w7.value)
  formData.append("rank",rank.value)
  formData.append("choice",choice.value)

  api({
    method:"post",
    url:"/water",
    data:formData
  }).then((res)=>{
    barData.value = res.data.data
  })
  vis.value = true



}




</script>

<style scoped>

</style>
